<template>
	<view class="dean_room">
		<scroll-view class="scroll-view_H" scroll-y="true" style="height: calc(100vh - 48rpx);">
			<view class="info_room  m-b-16">
				<view class="menuTitle">
					<text>数据统计</text>
					<view class="flex" style="align-items: center;">
						<view class="select_info m-r-10">
							近7天
							<u-icon name="arrow-down"></u-icon>
						</view>

					</view>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/cwsyl.svg')" alt="" />床位使用率
					</view>
					<Echarts :option="option1" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/pjzyr.svg')" alt="" />平均住院日
					</view>
					<Echarts :option="option2" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/ksjz.svg')" alt="" />科室救治前五
					</view>
					<Echarts :option="option3" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/kssr.svg')" alt="" />科室收入前五
					</view>
					<Echarts :option="option4" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/mjsr.svg')" alt="" />门急收入（共{{mjtotal}}万元）
					</view>
					<Echarts :option="option5" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/zysr.svg')" alt="" />住院收入（共{{zytotal}}万元）
					</view>
					<Echarts class="m-b-16" :option="option6" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/mjsr.svg')" alt="" />门诊收入构成
					</view>
					<Echarts :option="pieOption" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>
				<view class="echarts_room">

					<view class="progress_title">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/zysr.svg')" alt="" />住院收入构成
					</view>
					<Echarts :option="pieOption1" style="height: 300px;" @click="echartsClick"></Echarts>
				</view>

				
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/yzb.svg')" alt="" />门诊药占比

					</view>
					<view class="progressBox">
						<progress-circle :percent="mzyzbStat" :size="240" progressColor="#00BFB8" id='a'>
							<view class="centerTxt">

								<view class="txt">
									门诊药占比
								</view>
								<view class="num">
									{{mzyzbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10"
							:class="[mzyzb.tb && mzyzb.tb.indexOf('-') > -1 ? 'down' : '']">{{mzyzb.tb && mzyzb.tb.indexOf('-') > -1 ? '' : "+"}}{{mzyzb.tb}}
						</text>
						 <!-- 环比<text class="card_sub"
							:class="[mzyzb.hb && mzyzb.hb.indexOf('-') > -1 ? 'down' : '']">{{mzyzb.hb && mzyzb.hb.indexOf('-') > -1 ? '' : "+"}}{{mzyzb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/yzbr.svg')" alt="" />住院药占比

					</view>
					<view class="progressBox">
						<progress-circle :percent="zyyzbStat" :size="240" progressColor="#ED6969" id='b'>
							<view class="centerTxt">

								<view class="txt">
									住院药占比
								</view>
								<view class="num red">
									{{zyyzbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10"
							:class="[zyyzb.tb && zyyzb.tb.indexOf('-') > -1 ? 'down' : '']">{{zyyzb.tb && zyyzb.tb.indexOf('-') > -1 ? '' : "+"}}{{zyyzb.tb}}
						</text> 
						<!-- 环比<text class="card_sub"
							:class="[zyyzb.hb && zyyzb.hb.indexOf('-') > -1 ? 'down' : '']">{{zyyzb.hb && zyyzb.hb.indexOf('-') > -1 ? '' : "+"}}{{zyyzb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/sszb.svg')" alt="" />出院患者手术占比

					</view>
					<view class="progressBox">
						<progress-circle :percent="cyhzsszbStat" :size="240" progressColor="#00BFB8" id='c'>
							<view class="centerTxt">

								<view class="txt">
									出院患者手术占比
								</view>
								<view class="num">
									{{cyhzsszbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10"
							:class="[cyhzsszb.tb && cyhzsszb.tb.indexOf('-') > -1 ? 'down' : '']">{{cyhzsszb.tb && cyhzsszb.tb.indexOf('-') > -1 ? '' : "+"}}{{cyhzsszb.tb}}
						</text>
		<!-- 				 环比<text class="card_sub"
							:class="[cyhzsszb.hb && cyhzsszb.hb.indexOf('-') > -1 ? 'down' : '']">{{cyhzsszb.hb && cyhzsszb.hb.indexOf('-') > -1 ? '' : "+"}}{{cyhzsszb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/sszby.svg')" alt="" />出院患者微创手术占比

					</view>
					<view class="progressBox">
						<progress-circle :percent="cyhzwcsszbStat" :size="240" progressColor="#F29C66" id='d'>
							<view class="centerTxt">

								<view class="txt">
									出院患者微创手术占比
								</view>
								<view class="num h">
									{{cyhzwcsszbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10"
							:class="[cyhzwcsszb.tb && cyhzwcsszb.tb.indexOf('-') > -1 ? 'down' : '']">{{cyhzwcsszb.tb && cyhzwcsszb.tb.indexOf('-') > -1 ? '' : "+"}}{{cyhzwcsszb.tb}}
						</text>
	<!-- 					 环比<text class="card_sub"
							:class="[cyhzwcsszb.hb && cyhzwcsszb.hb.indexOf('-') > -1 ? 'down' : '']">{{cyhzwcsszb.hb && cyhzwcsszb.hb.indexOf('-') > -1 ? '' : "+"}}{{cyhzwcsszb.hb}}</text> -->
					</view>
				</view>
				<view class="echarts_room">
					<view class="progress_title m-b-10">
						<img class="m-r-10" style="width: 30rpx;height: 30rpx;vertical-align: bottom;"
							:src="require('@/static/svg/sszbr.svg')" alt="" />出院患者四级手术占比

					</view>
					<view class="progressBox">
						<progress-circle :percent="cyhzsjsszbStat" :size="240" progressColor="#ED6969" id='e'>
							<view class="centerTxt">

								<view class="txt">
									出院患者四级手术占比
								</view>
								<view class="num red">
									{{cyhzsjsszbStat}}<text class="sub">%</text>
								</view>
							</view>
						</progress-circle>
					</view>
					<view class="card_com">
						同比<text class="card_sub m-r-10"
							:class="[cyhzsjsszb.tb && cyhzsjsszb.tb.indexOf('-') > -1 ? 'down' : '']">{{cyhzsjsszb.tb && cyhzsjsszb.tb.indexOf('-') > -1 ? '' : "+"}}{{cyhzsjsszb.tb}}
						</text> 
						<!-- 环比<text class="card_sub"
							:class="[cyhzsjsszb.hb && cyhzsjsszb.hb.indexOf('-') > -1 ? 'down' : '']">{{cyhzsjsszb.hb && cyhzsjsszb.hb.indexOf('-') > -1 ? '' : "+"}}{{cyhzsjsszb.hb}}</text> -->

					</view>

				</view>
			
			</view>
			<view class="info_tips">注：当年累计及同比均不包括当天数据</view>
		</scroll-view>

		<!--  -->
		<u-action-sheet :actions="options" :show="show" :closeOnClickAction="true"
			@select="selectClick"></u-action-sheet>
	</view>
</template>

<script>
	import echarts from '@/static/echarts.min.js'
	import Echarts from '@/components/echarts'
	import progressCircle from '@/components/progress-circle'
	import {
		getMedicalTreatmentIndex
	} from '@/api/deanInquiry'
	export default {
		components: {
			Echarts,
			progressCircle
		},
		data() {
			return {

				options: [{
					name: '今日',
					id: '1'
				}],
				curNow: 0,
				show: false,
				mjtotal: '',
				zytotal: '',
				option1: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},

					legend: {
						data: ['床位使用率'],
						x: 'right', // 图例在右侧
					},
					grid: {
						left: 65
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},

						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],

					yAxis: [{
						type: 'value',
						name: '床位使用率',
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},
							formatter: '{value} %'
						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],
					series: [{
						name: '床位使用率',
						type: 'line',
						smooth: true,
						// yAxisIndex: 1,
						tooltip: {
							valueFormatter: function(value) {
								return value + ' %';
							}
						},
						lineStyle: {
							color: '#4C83E0'
						},
						//给折线图整体设置颜色
						itemStyle: {
							normal: {
								// color: '#4C83E0',
								areaStyle: {
									type: 'default'
								},
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[{
											offset: 0,
											color: '#4C83E0'
										},
										{
											offset: 1,
											color: 'rgba(78, 121, 237, 0.1)'
										}
									]
								),
								borderColor: '#4C83E0', //拐点边框颜色
								borderWidth: 2 //拐点边框大小
							},


						},
						data: []
					}]
				},
				option2: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},

					legend: {
						data: ['平均住院日'],
						x: 'right', // 图例在右侧
					},
					grid: {
						left: 65
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},

						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],

					yAxis: [{
						type: 'value',
						name: '天',
						min: 0,
						max: function(value) { //取最大值向上取整为最大刻度
							return Math.ceil(value.max)
						},
						// interval: 5,
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},
							formatter: '{value}'
						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],
					series: [


						{
							name: '平均住院日',
							type: 'line',
							smooth: true,
							// yAxisIndex: 1,
							tooltip: {
								valueFormatter: function(value) {
									return value + ' 天';
								}
							},
							lineStyle: {
								color: '#00BFB8',
							},
							//给折线图整体设置颜色
							itemStyle: {
								normal: {
									color: '#00BFB8',
									areaStyle: {
										type: 'default'
									},
									color: new echarts.graphic.LinearGradient(
										0, 0, 0, 1,
										[{
												offset: 0,
												color: '#00BFB8'
											},
											{
												offset: 1,
												color: 'rgba(0, 191, 184, 0.1)'
											}
										]
									),
									borderColor: '#00BFB8', //拐点边框颜色
									borderWidth: 2 //拐点边框大小
								},
							},
							data: []
						}
					]
				},
				option3: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},

					legend: {
						data: ['门诊量'],
						x: 'right', // 图例在右侧
					},
					grid: {
						left: 65
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},
							formatter: function(params) {
								var newParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 3; //一行显示几个字
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										newParamsName += tempStr;
									}
								} else {
									newParamsName = params;
								}
								return newParamsName;
							},
						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],

					yAxis: [{
							type: 'value',
							name: '人',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},
							// interval: 50,
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},
								formatter: '{value} 人'
							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						}

					],
					series: [

						{
							name: '门诊量',
							type: 'bar',
							tooltip: {
								valueFormatter: function(value) {
									return value + ' 万';
								}
							},
							//给柱状图整体设置颜色
							itemStyle: {
								normal: {
									color: '#F29C66'
								},
							},
							data: [

							]
						},

					]
				},
				option4: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},

					legend: {
						data: ['收入'],
						x: 'right', // 图例在右侧
					},
					grid: {
						left: 65
					},
					xAxis: [{
						type: 'category',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},
							formatter: function(params) {
								var newParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 3; //一行显示几个字
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										newParamsName += tempStr;
									}
								} else {
									newParamsName = params;
								}
								return newParamsName;
							},

						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],

					yAxis: [{
							type: 'value',
							name: '万元',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},
							// interval: 50,
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},
								formatter: '{value}',
							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						},

					],
					series: [

						{
							name: '收入',
							type: 'bar',
							tooltip: {
								valueFormatter: function(value) {
									return value + ' 万';
								}
							},
							//给柱状图整体设置颜色
							itemStyle: {
								normal: {
									color: '#4E79ED'
								},
							},
							data: [

							]
						},

					]
				},
				option5: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},

					legend: {
						data: ['收入'],
						x: 'right', // 图例在右侧
					},
					grid: {
						left: 65
					},
					yAxis: [{
						name: '收入',
						type: 'category',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',
							},

							formatter: function(params) {
								var newParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 4; //一行显示几个字
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										newParamsName += tempStr;
									}
								} else {
									newParamsName = params;
								}
								return newParamsName;
							},
						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],

					xAxis: [{
							type: 'value',
							name:'万元',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},
							// interval: 50,
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},

							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						},

					],
					series: [

						{
							name: '收入',
							type: 'bar',
							tooltip: {
								valueFormatter: function(value) {
									return value + ' 万';
								}
							},
							label: {
								show: true, //开启显示
								position: 'right', //在上方显示
							},
							//给柱状图整体设置颜色
							itemStyle: {
								normal: {
									color: '#00BFB8'
								},
							},
							data: [

							]
						},

					]
				},
				option6: {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},

					legend: {
						data: ['收入'],
						x: 'right', // 图例在右侧
					},
					grid: {
						left: 65
					},
					yAxis: [{
						type: 'category',
						name: '收入',
						data: [],
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							textStyle: {
								color: '#8497B9',

							},
							formatter: function(params) {
								var newParamsName = "";
								var paramsNameNumber = params.length;
								var provideNumber = 4; //一行显示几个字
								var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
								if (paramsNameNumber > provideNumber) {
									for (var p = 0; p < rowNumber; p++) {
										var tempStr = "";
										var start = p * provideNumber;
										var end = start + provideNumber;
										if (p == rowNumber - 1) {
											tempStr = params.substring(start, paramsNameNumber);
										} else {
											tempStr = params.substring(start, end) + "\n";
										}
										newParamsName += tempStr;
									}
								} else {
									newParamsName = params;
								}
								return newParamsName;
							},

						},
						nameTextStyle: {
							color: '#8497B9'
						},
						axisLine: {
							show: true, // 是否显示坐标轴轴线
							lineStyle: {
								color: '#E4ECFA', // 线的颜色
								width: 2, // 线的宽度
								type: 'solid' // 线的类型
							}
						},
					}],

					xAxis: [{
							type: 'value',
							name:'万元',
							min: 0,
							max: function(value) { //取最大值向上取整为最大刻度
								return Math.ceil(value.max)
							},
							// interval: 50,
							nameTextStyle: {
								color: '#8497B9'
							},
							axisLabel: {
								textStyle: {
									color: '#8497B9',
								},

							},
							axisLine: {
								show: true, // 是否显示坐标轴轴线
								lineStyle: {
									color: '#E4ECFA', // 线的颜色
									width: 2, // 线的宽度
									type: 'solid' // 线的类型
								}
							},
						},

					],
					series: [

						{
							name: '收入',
							type: 'bar',
							tooltip: {
								valueFormatter: function(value) {
									return value + ' 万';
								}
							},
							//给柱状图整体设置颜色
							itemStyle: {
								normal: {
									color: '#ED6969'
								},
							},
							label: {
								show: true, //开启显示
								position: 'right', //在上方显示
							},
							data: [

							]
						},

					]
				},
				pieOption: {

					tooltip: {
						trigger: 'item'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [],
						label: {
							normal: {
								position: "inside",
								formatter: '{b}\n{d}%',

							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				pieOption1: {

					tooltip: {
						trigger: 'item'
					},
					series: [{
						name: 'Access From',
						type: 'pie',
						radius: '50%',
						data: [

						],
						label: {
							normal: {
								position: "inside",
								formatter: '{b}\n{d}%',

							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				},
				mzyzb: {},
				mzyzbStat: 0,
				zyyzb: {},
				zyyzbStat: 0,
				cyhzsszb: {},
				cyhzsszbStat: 0,
				cyhzwcsszbStat: 0,
				cyhzwcsszb: {},
				cyhzsjsszbStat: 0,
				cyhzsjsszb: {}
			}
		},
		onLoad(options) {
			this.getData()
		},
		methods: {
			getData() {
				getMedicalTreatmentIndex({
					datePattern: 0
				}).then(res => {
					console.log(res, '-------res-------------')
					this.option1.xAxis[0].data = res.data.bedUseRate?.xAxis.map(item => item.slice(-2)) || [];
					this.option1.series[0].data = res.data.bedUseRate?.yAxis || [];
					this.option2.xAxis[0].data = res.data.avgZyDays?.xAxis.map(item => item.slice(-2)) || [];
					this.option2.series[0].data = res.data.avgZyDays?.yAxis || [];
					this.option3.xAxis[0].data = res.data.ksjzq5?.xAxis || [];
					this.option3.series[0].data = res.data.ksjzq5?.yAxis || [];
					this.option4.xAxis[0].data = res.data.kssrq5?.xAxis || [];
					this.option4.series[0].data = res.data.kssrq5?.yAxis.map(item => {
						let num = (item / 10000).toFixed(2)
						return num
					}) || [];
					this.option5.yAxis[0].data = res.data.mjsr?.xAxis || [];
					this.option5.series[0].data = res.data.mjsr?.yAxis.map(item => {
						let num = (item / 10000).toFixed(2)
						return num
					}) || [];
					this.option6.yAxis[0].data = res.data.zysr?.xAxis || [];
					this.option6.series[0].data = res.data.zysr?.yAxis.map(item => {
						let num = (item / 10000).toFixed(2)
						return num
					}) || [];
					this.mjtotal = res.data.mjsr?.total ? (res.data.mjsr?.total / 10000).toFixed(2) : 0;
					this.zytotal = res.data.zysr?.total ? (res.data.zysr?.total / 10000).toFixed(2) : 0;
					let arr1 = []
					res.data.mzsrgc?.xAxis.forEach((item, index) => {
						let obj = {}
						obj.value = item;
						obj.name = res.data.mzsrgc?.yAxis[index];
						arr1.push(obj)
					})
					let arr2 = []
					res.data.zysrgc?.xAxis.forEach((item, index) => {
						let obj = {}
						obj.value = item;
						obj.name = res.data.zysrgc?.yAxis[index];
						arr2.push(obj)
					})
					this.pieOption.series[0].data = arr1;
					this.pieOption1.series[0].data = arr2;

					this.mzyzb = res.data.mzyzb;
					this.mzyzbStat = res.data.mzyzb?.total > 0 ? parseInt((res.data.mzyzb.yzb / res.data.mzyzb
						.total) * 100) : 0;

					this.zyyzb = res.data.zyyzb;
					this.zyyzbStat = res.data.zyyzb?.total > 0 ? parseInt((res.data.zyyzb.yzb / res.data.zyyzb
						.total) * 100) : 0;

					this.cyhzsszb = res.data.cyhzsszb;
					this.cyhzsszbStat = res.data.cyhzsszb?.total > 0 ? parseInt((res.data.cyhzsszb.yzb / res.data
						.cyhzsszb
						.total) * 100) : 0;

					this.cyhzwcsszb = res.data.cyhzwcsszb;
					this.cyhzwcsszbStat = res.data.cyhzwcsszb?.total > 0 ? parseInt((res.data.cyhzwcsszb.yzb / res
						.data.cyhzwcsszb
						.total) * 100) : 0;

					this.cyhzsjsszb = res.data.cyhzsjsszb;
					this.cyhzsjsszbStat = res.data.cyhzsjsszb?.total > 0 ? parseInt((res.data.cyhzsjsszb.yzb / res
						.data.cyhzsjsszb
						.total) * 100) : 0;

				})
			},
			sectionChange(index) {
				this.curNow = index;
			},
			selectClick(val) {
				console.log(val, 'val')
				this.show = false
			},
			echartsClick(params) {
				console.log('点击数据', params)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dean_room {
		width: 100%;
		height: 100vh;
		background: rgba(241, 245, 248, 1); //linear-gradient(0deg, rgba(255, 255, 255, 0) 69.44%, rgba(241, 245, 248, 1) 100%);
		padding: 24rpx;

		.info_tips {
			color: #ED9164;
			font-size: 24rpx;
		}

		.info_room {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 24rpx 28rpx;

			.menuTitle {
				font-size: 36rpx;
				font-weight: 800;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.select_info {
					border: 1px solid #ddd;
					border-radius: 5px;
					font-weight: 400;
					font-size: 14px;
					width: 140rpx;
					height: 48rpx;
					line-height: 48rpx;
					padding: 0 8rpx;
					display: flex;
					justify-content: space-between;
				}
			}

			.menuRoom {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
			}

			.menuItem {
				width: calc(100% / 4);
				text-align: center;
				height: 130rpx;
			}

			.card_room {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				gap: 12rpx;

				.card_item {
					width: calc(50% - 12rpx);
					height: 240rpx;
					border-radius: 10rpx;
					background: rgb(252, 252, 252);
					border: 1px solid rgb(221, 221, 221);

					.card_title {
						height: 74rpx;
						background: rgb(237, 242, 253);
						box-shadow: 0px 1rpx 0rpx rgb(221, 221, 221);
						text-align: center;
						line-height: 74rpx;
						font-size: 28rpx;
						font-weight: 800;
						position: relative;

						.card_icon {
							position: absolute;
							width: 49rpx;
							height: 36rpx;
							border-radius: 0px 20rpx 20rpx 0px;
							background: #4E79ED;
							font-size: 24rpx;
							font-weight: 500;
							color: #fff;
							line-height: 36rpx;
							left: -16rpx;
							top: 12px;

							&::before {
								position: absolute;
								display: block;
								bottom: -5px;
								content: '';
								width: 14rpx;
								height: 10rpx;
								background-repeat: no-repeat;
								background-image: linear-gradient(215deg, #3053B3 50%, #fff 50%);
							}

							&.red {
								background: #ED6969;

								&::before {
									background-image: linear-gradient(215deg, #B83333 50%, #fff 50%);
								}
							}

							&.zi {
								background: #8168ED;

								&::before {
									background-image: linear-gradient(215deg, #472EB3 50%, #fff 50%);
								}
							}

							&.lu {
								background: #00BFB8;

								&::before {
									background-image: linear-gradient(215deg, #047572 50%, #fff 50%);
								}
							}
						}
					}

					.card_main {
						font-size: 42rpx;
						font-weight: 600;
						color: #04203D;
						text-align: center;
						padding: 16rpx 0 10rpx;
					}

					.card_sub {
						font-size: 24rpx;
						font-weight: 600;
						color: #7E8B9B;
					}

					.card_com {
						text-align: center;
						color: #ED6969;
						font-size: 24rpx;
						font-weight: 600;

						&.down {
							color: #00BFB8;
						}
					}

					.card_total {
						text-align: center;
						color: #04203D;
						font-size: 24rpx;
						font-weight: 600;

					}
				}
			}

			.progress_title {
				font-size: 28rpx;
				color: #04203D;
				font-weight: 600;
			}

			.progress_room {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.progress_line {
					width: calc(100% - 100rpx);
				}

				.progress_text {
					width: 100rpx;
					font-size: 36rpx;
					color: #04203D;
					text-align: right;

					.progress_icon {
						font-size: 24rpx;
						color: #7E8B9B
					}
				}
			}

			.echarts_room {
				position: relative;
				border: 1px solid #DDDDDD;
				background: #FCFCFC;
				margin-bottom: 10rpx;

				.card_com {
					margin: 20rpx 0;
					text-align: center;
					font-size: 24rpx;

					.card_sub {
						color: #ED6969;
						font-weight: 600;

						&.down {
							color: #00BFB8;
						}
					}

				}

				.progress_title {
					position: absolute;
					left: 10rpx;
				}
			}
		}

		.progressBox {
			position: relative;
			width: 240rpx;
			height: 240rpx;
			margin: 0 auto;
			margin-top: 100rpx;
		}

		.centerTxt {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.num {
				font-size: 36rpx;
				font-weight: bold;
				color: #00BFB8;
				text-align: center;

				&.red {
					color: #ED6969;
				}

				&.h {
					color: #F29C66;
				}

				.sub {
					color: #7E8B9B;
					font-size: 24rpx;
				}
			}

			.txt {
				font-size: 24rpx;
				font-weight: 400;
				color: #4A5570;
				margin-top: 10rpx;
				text-align: center;
			}

		}
	}
</style>